<template>
  <div v-show="signPage === 0 || signPage === pageNum" class="sign-box">
    <div :class="{'fix':signFix}" class="tool-bar">
      <el-button type="primary" icon="el-icon-plus" @click="plus" />
      <el-button type="primary" icon="el-icon-minus" @click="minus" />
      <el-button type="primary" icon="el-icon-check" @click="check" />
      <el-button type="primary" icon="el-icon-close" @click="cancle" />
    </div>
    <i class="el-icon-unlock" :class="{'fix':signFix}" @click="unlockSign" />
    <img id="signImg" :class="{'fix':signFix}" :src="'data:image/png;base64,'+signObj.imgFileData" @mousedown="drag($event)">
  </div>
</template>

<script>

export default {
    components: {

    },
    props: {
        signObj: { type: Object, default: function() { return {} } },
        pageNum: { type: Number, default: 1 }
    },
    data() {
        return {
            signContent: '',
            signSrc: '',
            signPage: 0,
            signScale: 1.0,
            xPos: 0,
            yPos: 0,
            oriWidth: 0,
            defaultWidth: 160,
            signFix: false
        }
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    beforeDestroy() {

    },
    mounted() {
        this.addSuccess()
    },
    methods: {
        // 图片传入
        addSuccess() {
            this.oriWidth = $('#signImg').width()
            this.signScale = this.defaultWidth / this.oriWidth
            $('#signImg').width(this.defaultWidth)
            const left = ($('.box-inner').width() - this.defaultWidth) / 2
            const top = $(window).height() / 1.6

            $('.sign-box').css({ 'left': left, 'top': top })
            this.xPos = left / $('.box-inner').width()
            this.yPos = (top + 30) / $('.box-inner').height()
            this.signPage = this.pageNum
        },

        // 图片拖拽
        drag(e) {
            if (this.signFix) return false
            const o = $('.box-inner') // 可活动区域
            const m = $('.sign-box') // 移动目标
            const positionDiv = m.offset()
            const distenceX = e.pageX - positionDiv.left
            const distenceY = e.pageY - positionDiv.top
            console.log('oheight=' + o.height())

            o.mousemove(e => {
                let x = e.pageX - distenceX - o.offset().left
                let y = e.pageY - distenceY - o.offset().top
                if (x < 0) {
                    x = 0
                } else if (x > o.width() - m.outerWidth(true)) {
                    x = o.width() - m.outerWidth(true)
                }
                if (y < 0) {
                    y = 0
                } else if (y > o.height() - m.outerHeight(true)) {
                    y = o.height() - m.outerHeight(true)
                }
                m.css({
                    'left': x + 'px',
                    'top': y + 'px'
                })

                console.log('y=' + y)

                this.xPos = x / o.width()
                this.yPos = (y + 30) / o.height()

                return false
            })
            o.mouseup(() => {
                o.off('mousemove')
                o.off('mouseup')
            })
            return false
        },

        // 图片放大
        plus() {
            $('#signImg').css('width', function() {
                return $(this).width() * 1.05
            })
        },

        // 图片缩小
        minus() {
            $('#signImg').css('width', function() {
                return $(this).width() / 1.05
            })
        },

        // 保存签名
        check() {
            this.signScale = $('#signImg').width() / this.oriWidth
            this.$emit('signInfo', this.signScale, this.signPage, this.xPos, this.yPos)
            this.signFix = true
        },

        // 取消签名
        cancle() {
            this.signObj = {}
            this.signPage = 0
            this.$emit('cancleSign')
        },

        // 解锁签名
        unlockSign() {
            this.signFix = false
            this.$emit('unlockSign')
        }
    }
}
</script>

<style scoped lang="scss">
.sign-box{position: absolute;z-index:99;}
.sign-box .tool-bar{margin-bottom: 4px;}
.sign-box .tool-bar.fix{margin-bottom: 4px;opacity:0;}
.sign-box .tool-bar button{width:26px;height:26px;padding:0;}
.sign-box .el-icon-unlock{position: absolute;font-size:30px; color:#F56C6C;margin-left:-15px;margin-top:-15px;left:50%;top:50%;cursor: pointer;z-index:999;display:none;}
.sign-box:hover .el-icon-unlock.fix{display: inline;}
.sign-box #signImg{ cursor: move; border: 2px dashed #f9bc82; }
.sign-box #signImg.fix{ cursor: default; border-color: transparent;}
</style>
